<template>
  <view class="data-detail-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">数据明细</view>
    </view>

    <!-- 二级页面入口列表 -->
    <view class="menu-section">
      <up-cell-group :border="false">
        <up-cell 
          v-for="(item, index) in menuItems" 
          :key="index" 
          :title="item.name" 
          :titleStyle="{ fontSize: '28rpx', color: '#333333' }" 
          is-link 
          @click="handleMenuClick(item)" 
          :border="index == menuItems.length - 1 ? false : true"
        >
          <template #icon>
            <image :src="item.icon" mode="widthFix" class="menu-icon"></image>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 二级页面菜单项
const menuItems = ref([
  {
    name: "停车长短统计",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-detail/parking-duration-stats/index",
  },
  {
    name: "停车次数统计",
    icon: "/static/images/wallet-icon.svg",
    path: "/pages/data-detail/parking-count-stats/index",
  },
  {
    name: "停车时长统计",
    icon: "/static/images/paid-icon.svg",
    path: "/pages/data-detail/parking-time-stats/index",
  },
  {
    name: "停车频率统计",
    icon: "/static/images/unpaid-icon.svg",
    path: "/pages/data-detail/parking-frequency-stats/index",   
  },
  {
    name: "支付方式统计",
    icon: "/static/images/wallet-icon.svg",
    path: "/pages/data-detail/payment-method-stats/index",
  },
  {
    name: "充值类型统计",
    icon: "/static/images/paid-icon.svg",
    path: "/pages/data-detail/recharge-type-stats/index",
  },
  {
    name: "用户与车辆统计",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-detail/user-vehicle-stats/index",
  },
  {
    name: "用户与服务统计",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-detail/user-service-stats/index",
  },
  {
    name: "每日时段统计",
    icon: "/static/images/wallet-icon.svg",
    path: "/pages/data-detail/daily-time-stats/index",
  },
  {
    name: "缴费时长统计",
    icon: "/static/images/paid-icon.svg",
    path: "/pages/data-detail/payment-duration-stats/index",
  },
  {
    name: "欠费类型统计",
    icon: "/static/images/unpaid-icon.svg",
    path: "/pages/data-detail/arrears-type-stats/index",
  },
  {
    name: "欠费时长统计",
    icon: "/static/images/unpaid-icon.svg",
    path: "/pages/data-detail/arrears-duration-stats/index",
  },
  {
    name: "车辆颜色统计",
    icon: "/static/images/complaint@2x.png",
    path: "/pages/data-detail/vehicle-color-stats/index",
  },
  {
    name: "车辆归属地统计",
    icon: "/static/images/wallet-icon.svg",
    path: "/pages/data-detail/vehicle-location-stats/index",
  },
  {
    name: "充值金额统计",
    icon: "/static/images/paid-icon.svg",
    path: "/pages/data-detail/recharge-amount-stats/index",
  },
  {    name: "支付类型统计",    icon: "/static/images/wallet-icon.svg",    path: "/pages/data-detail/payment-type-stats/index",  },  {    name: "订单支付统计",    icon: "/static/images/paid-icon.svg",    path: "/pages/data-detail/order-payment-stats/index",  },
  {
    name: "钱包余额统计",
    icon: "/static/images/wallet-icon.svg",
    path: "/pages/data-detail/wallet-balance-stats/index",
  },
  {    name: "退款金额统计",    icon: "/static/images/unpaid-icon.svg",    path: "/pages/data-detail/refund-amount-stats/index",  },
  {    name: "驶离欠费统计",    icon: "/static/images/unpaid-icon.svg",    path: "/pages/data-detail/departure-arrears-stats/index",  },
  {    name: "月卡购买统计",    icon: "/static/images/wallet-icon.svg",    path: "/pages/data-detail/monthly-card-stats/index",  },
  {    name: "修改车牌统计",    icon: "/static/images/complaint@2x.png",    path: "/pages/data-detail/plate-modify-stats/index",  },
  {    name: "投申诉统计",    icon: "/static/images/complaint@2x.png",    path: "/pages/data-detail/appeal-complaint-stats/index",  },
  {    name: "认证统计",    icon: "/static/images/wallet-icon.svg",    path: "/pages/data-detail/auth-stats/index",  },
  {    name: "企业认证统计",    icon: "/static/images/complaint@2x.png",    path: "/pages/data-detail/enterprise-auth-stats/index",  }  // 可以在这里添加更多二级页面入口
])

// 菜单点击处理
const handleMenuClick = (item) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path
    })
  }
}
</script>

<style lang="scss" scoped>
.data-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx 30rpx;
  color: white;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }
}

.menu-section {
  margin: 30rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.menu-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
</style>